﻿ $(window).load(function () {
     $(".loading").fadeOut()
 })
 $(function () {

     echarts_2()
     echarts_3()
     echarts_4()
     echarts_5()
     echarts_6()
     echarts_7()

     function echarts_2() {
         // 基于准备好的dom，初始化echarts实例
         var myChart = echarts.init(document.getElementById('echart2'));
         var data = [683, 234, 234, 523, 345, 320, 280, 271, 254, 229, 210, 190, 182]
         var titlename = ['北京', '上海', '广州', '郑州', '武汉', '南京', '杭州', '东莞', '深圳', '虎门', '青岛', '石家庄', '安阳'];
         option = {
             grid: {
                 left: '0',
                 top: '0',
                 right: '0',
                 bottom: '0%',
                 containLabel: true
             },
             xAxis: {
                 show: false
             },
             yAxis: [{
                 show: true,
                 data: titlename,
                 inverse: true,
                 axisLine: {
                     show: false
                 },
                 splitLine: {
                     show: false
                 },
                 axisTick: {
                     show: false
                 },
                 axisLabel: {
                     textStyle: {
                         color: '#fff'
                     },
                 },

             }, {
                 show: false,
                 inverse: true,
                 data: data,
                 axisLabel: {
                     textStyle: {
                         color: '#fff'
                     }
                 },
                 axisLine: {
                     show: false
                 },
                 splitLine: {
                     show: false
                 },
                 axisTick: {
                     show: false
                 },
             }],
             series: [{
                 name: '条',
                 type: 'bar',
                 yAxisIndex: 0,
                 data: data,
                 barWidth: 15,
                 itemStyle: {
                     normal: {
                         barBorderRadius: 50,
                         color: '#1089E7',
                     }
                 },
                 label: {
                     normal: {
                         show: true,
                         position: 'right',
                         formatter: '{c}',
                         textStyle: {
                             color: 'rgba(255,255,255,.5)'
                         }
                     }
                 },
             }]
         };
         // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option);
         window.addEventListener("resize", function () {
             myChart.resize();
         });
     }

     function echarts_3() {
         // 基于准备好的dom，初始化echarts实例
         var myChart = echarts.init(document.getElementById('echart3'));
         option = {
             tooltip: {
                 trigger: 'axis',
                 axisPointer: {
                     lineStyle: {
                         color: '#dddc6b'
                     }
                 }
             },
             grid: {
                 left: '10',
                 top: '20',
                 right: '30',
                 bottom: '10',
                 containLabel: true
             },

             xAxis: [{
                 type: 'category',
                 boundaryGap: false,
                 axisLabel: {
                     textStyle: {
                         color: "rgba(255,255,255,.6)",
                         fontSize: 14,
                     },
                 },
                 axisLine: {
                     lineStyle: {
                         color: 'rgba(255,255,255,.2)'
                     }

                 },

                 data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']

             }, {

                 axisPointer: {
                     show: false
                 },
                 axisLine: {
                     show: false
                 },
                 position: 'bottom',
                 offset: 20,



             }],

             yAxis: [{
                 type: 'value',
                 axisTick: {
                     show: false
                 },
                 splitNumber: 4,
                 axisLine: {
                     lineStyle: {
                         color: 'rgba(255,255,255,.1)'
                     }
                 },
                 axisLabel: {
                     textStyle: {
                         color: "rgba(255,255,255,.6)",
                         fontSize: 16,
                     },
                 },

                 splitLine: {
                     lineStyle: {
                         color: 'rgba(255,255,255,.1)',
                         type: 'dotted',
                     }
                 }
             }],
             series: [{
                     name: '结算率',
                     type: 'line',
                     smooth: true,
                     symbol: 'circle',
                     symbolSize: 5,
                     showSymbol: false,
                     lineStyle: {

                         normal: {
                             color: 'rgba(31, 174, 234, 1)',
                             width: 2
                         }
                     },
                     areaStyle: {
                         normal: {
                             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                 offset: 0,
                                 color: 'rgba(31, 174, 234, 0.4)'
                             }, {
                                 offset: 0.8,
                                 color: 'rgba(31, 174, 234, 0.1)'
                             }], false),
                             shadowColor: 'rgba(0, 0, 0, 0.1)',
                         }
                     },
                     itemStyle: {
                         normal: {
                             color: '#1f7eea',
                             borderColor: 'rgba(31, 174, 234, .1)',
                             borderWidth: 5
                         }
                     },
                     data: [3, 6, 3, 6, 3, 9, 3, 12, 6, 8, 3, 5, 9, 3]

                 },

             ]

         };
         // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option);
         window.addEventListener("resize", function () {
             myChart.resize();
         });
     }

     function echarts_4() {
         // 基于准备好的dom，初始化echarts实例
         var myChart = echarts.init(document.getElementById('echart4'));
         var option = {




             grid: {
                 left: '0',
                 top: '30',
                 right: '0',
                 bottom: '10',
                 containLabel: true
             },
             legend: {

                 top: 0,

                 textStyle: {

                     color: "#fff",

                 },

                 itemWidth: 10, // 设置宽度

                 itemHeight: 10, // 设置高度

             },

             tooltip: {

                 trigger: 'axis',

                 axisPointer: { // 坐标轴指示器，坐标轴触发有效

                     type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'

                 }

             },

             xAxis: {

                 type: 'category',

                 data: ["西进口右转", "北进口直行", "南进口直行", ],

                 axisTick: { //---坐标轴 刻度

                     show: true, //---是否显示

                 },

                 axisLine: { //---坐标轴 轴线

                     show: true, //---是否显示

                     lineStyle: {

                         color: 'rgba(255,255,255,.1)',

                         width: 1,

                         type: 'dotted',

                     },

                 },

                 axisLabel: { //X轴文字

                     textStyle: {

                         fontSize: 12,

                         color: '#fff'

                     },

                 },

             },

             yAxis: {

                 type: 'value',

                 splitLine: { //分割线

                     show: true,

                     lineStyle: {
                         color: 'rgba(255,255,255,.1)',

                         width: 1,
                         type: 'dotted'

                     }

                 },

                 axisLabel: { //Y轴刻度值

                     formatter: '{value}',

                     textStyle: {

                         fontSize: 12,

                         color: '#fff'

                     },

                 },

                 axisLine: { //---坐标轴 轴线

                     show: false, //---是否显示

                 },

             },

             series: [{

                 name: '原方案',

                 type: 'bar',

                 data: [3, 7, 4],

                 barWidth: 15,

                 barGap: 1, //柱子之间间距 //柱图宽度      两种情况都要设置，设置series 中对应数据柱形的itemStyle属性下的emphasis和normal的barBorderRadius属性初始化时候圆角  鼠标移上去圆角

                 itemStyle: {

                     normal: {
                         barBorderRadius: 50,
                         color: "#446ACF",

                     }

                 },

             }, {

                 name: '建议方案',

                 type: 'bar',

                 data: [6, 2, 5],

                 barWidth: 15, //柱图宽度

                 itemStyle: {

                     normal: { //设置颜色的渐变
                         barBorderRadius: 50,
                         color: "#4fb69d",

                     }

                 },

             }]

         };
         // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option);
         window.addEventListener("resize", function () {
             myChart.resize();
         });
     }

     function echarts_5() {
         // 基于准备好的dom，初始化echarts实例
         var myChart = echarts.init(document.getElementById('echart5'));
         option = {
             legend: {
                 orient: 'vertical',
                 itemWidth: 10,
                 itemHeight: 10,
                 textStyle: {
                     color: 'rgba(255,255,255,.5)'
                 },
                 top: '20%',
                 right: 30,
                 data: ['巡查', '在线', '离线'] //暂时不知有什么用处
             },
             color: ['#37a2da', '#32c5e9', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378ea'],
             tooltip: {
                 trigger: 'item',
                 formatter: "{b} : {c} ({d}%)"
             },

             calculable: true,
             series: [{

                 type: 'pie',
                 radius: [20, 70],
                 center: ["50%", "50%"],
                 roseType: 'area',
                 data: [{
                         value: 3,
                         name: '巡查中'
                     },
                     {
                         value: 2,
                         name: '充电中'
                     },
                     {
                         value: 2,
                         name: '空闲中'
                     },
                     {
                         value: 1,
                         name: '因故停用中'
                     },

                 ],
                 label: {
                     normal: {
                         formatter: function (param) {
                             return param.name + ':\n' + param.value + '\n';
                         }

                     }
                 },
                 labelLine: {
                     normal: {
                         length: 5,
                         length2: 15,
                         lineStyle: {
                             width: 1
                         }
                     }
                 },

                 itemStyle: {
                     normal: {
                         shadowBlur: 30,
                         shadowColor: 'rgba(0, 0, 0, 0.4)'
                     }

                 },
             }]
         };
         myChart.setOption(option);
         window.addEventListener("resize", function () {
             myChart.resize();
         });
     }

     function echarts_6() {
         // 基于准备好的dom，初始化echarts实例
         var myChart = echarts.init(document.getElementById('echart6'));
         option = {

             tooltip: {
                 trigger: 'axis'
             },
             radar: [{
                 indicator: [{
                     text: '盈利能力',
                     max: 100
                 }, {
                     text: '发展水平',
                     max: 100
                 }, {
                     text: '融资能力',
                     max: 100
                 }, {
                     text: '技术能力',
                     max: 100
                 }, {
                     text: '企业规模',
                     max: 100
                 }],
                 textStyle: {
                     color: 'red'
                 },
                 center: ['50%', '50%'],
                 radius: '70%',
                 startAngle: 90,
                 splitNumber: 4,
                 shape: 'circle',

                 name: {
                     padding: -5,
                     formatter: '{value}',
                     textStyle: {

                         color: 'rgba(255,255,255,.5)'
                     }
                 },
                 splitArea: {
                     areaStyle: {
                         color: 'rgba(255,255,255,.05)'
                     }
                 },
                 axisLine: {
                     lineStyle: {
                         color: 'rgba(255,255,255,.05)'
                     }
                 },
                 splitLine: {
                     lineStyle: {
                         color: 'rgba(255,255,255,.05)'
                     }
                 }
             }, ],
             series: [{
                 name: '雷达图',
                 type: 'radar',
                 tooltip: {
                     trigger: 'item'
                 },
                 data: [{
                     name: '园区平均值',
                     value: [90, 80, 20, 10, 30],
                     lineStyle: {
                         normal: {
                             color: '#03b48e',
                             width: 2,
                         }
                     },
                     areaStyle: {
                         normal: {
                             color: '#03b48e',
                             opacity: .4
                         }
                     },
                     symbolSize: 0,

                 }, {
                     name: '当前园区',
                     value: [30, 20, 75, 80, 70],
                     symbolSize: 0,
                     lineStyle: {
                         normal: {
                             color: '#3893e5',
                             width: 2,
                         }
                     },
                     areaStyle: {
                         normal: {
                             color: 'rgba(19, 173, 255, 0.5)'
                         }
                     }
                 }]
             }, ]
         };
         myChart.setOption(option);
         window.addEventListener("resize", function () {
             myChart.resize();
         });
     }
     //监控设备模块
     function echarts_7() {
         // 基于准备好的dom，初始化echarts实例
         var myChart = echarts.init(document.getElementById('echart7'));
         option = {
             legend: {
                 orient: 'vertical',
                 itemWidth: 10,
                 itemHeight: 10,
                 textStyle: {
                     color: 'rgba(255,255,255,.5)'
                 },
                 top: '20%',
                 right: 30,
                 data: ['巡查', '在线', '离线'] //暂时不知有什么用处
             },
             color: ['#37a2da', '#fb7293', '#e7bcf3', '#8378ea'],
             tooltip: {
                 trigger: 'item',
                 formatter: "{b} : {c} ({d}%)"
             },

             calculable: true,
             series: [{

                 type: 'pie',
                 radius: [40, 60],
                 center: ["50%", "50%"],
                 roseType: 'area',
                 data: [{
                         value: 137,
                         name: '运行中'
                     },
                     {
                         value: 8,
                         name: '停用中'
                     },

                 ],
                 label: {
                     normal: {
                         formatter: function (param) {
                             return param.name + ':\n' + param.value + '\n';
                         }

                     }
                 },
                 labelLine: {
                     normal: {
                         length: 5,
                         length2: 15,
                         lineStyle: {
                             width: 1
                         }
                     }
                 },

                 itemStyle: {
                     normal: {
                         shadowBlur: 30,
                         shadowColor: 'rgba(0, 0, 0, 0.4)'
                     }

                 },
             }]
         };
         myChart.setOption(option);
         window.addEventListener("resize", function () {
             myChart.resize();
         });
     }
 })